<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 3.使用link标签引入外部样式表 -->
     <link rel="stylesheet" href="./outer.css">
    <!-- 2.内部样式表 style标签-->
     <style>
     /* 标签选择器 标签名{} */
     div{
        color: orange;
     }
     /* id选择器 #id{} 100 */
     #three{
        color: aqua;
        font-size: 18px;
     }
     /* 类选择器 .class() 10 */
     .four{
        color: chartreuse;
        /* 设置斜体 */
        font-style: italic;
        /* 设置字体加粗 */
        font-weight: bolder;
     }
     /* 并集选择器 组合选择器*/
     #three,p,span{
        background-color: red;
     }
     /* 后代选择器 空格隔开 */
     section div{
        color: cyan;
        font-size: 22px;
     }
     </style>
</head>
<body>
    <!-- 1.内联样式/行内样式 直接在标签内部设置样式 -->
    <div style="font-size: 18px;color: blueviolet;">块级元素1</div>
    <div>块级元素2</div>
    <div id="three">块级元素3</div>
    <div class="four">块级元素4</div>
    <div class="fout five">块级元素5</div>
    <p>段落标签</p>
    <span>行内元素</span>
    <!-- 块级元素 section div -->
    <section>
        <div>块级元素1</div>
        <div>块级元素2</div>
        <div>块级元素3</div>
        <div>块级元素4</div>
    </section>
</body>
</html>